<template>
	<view class="upData">
		<image class="image" :src="fileData" mode="" @click="getPreviewImage([fileData])"></image>
		<!-- <view class="">
			{{JSON.stringify(content2)}}
		</view> -->
	</view>
</template>

<script>
	// api引入
	import {
		postHeadUpload,

		setUploadBase64Api, // base64上传
	} from '@/api/user.js'



	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		props: {
			data: {
				type: String,
				default: ''

			},
		},
		data() {
			return {
				// 单张上传数据
				fileData: '',

				content: '', // 选择的图片
				content2: '', // 选择的图片
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		
		
		watch: {
			userInfo:{
				handler(){
					if(Object.keys(this.userInfo).length>0){
						console.log('执行了吗',this.userInfo);
						this.fileData = this.userInfo.avatarUrl
					}
				},
				deep:true,
				immediate:true
			},
			
			
			content() {
				if (this.content !== '') {
					// 成功了就上传
					if (this.content.errMsg) {
						this.$public.showLoading(true)
						this.uploadFilePromise(this.content.path)
					} else {
						this.$public.showText('上传失败')
					}

				}
			}
		},

		methods: {

			...mapMutations(['setUserInfo']),
			
			/**
			 * 预览图片
			 */
			getPreviewImage(url, num = 0) {
				let that = this
				// 预览图片
				uni.previewImage({
					urls: url,
					current: num,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg, '100');
						}
					},
			
					success: res => {
						console.log(res, 'kkk');
					},
					fail(err) {
						console.log(err, '222');
					},
				});
			},

			/**
			 * 选择图片
			 */
			async upHeadImg() {
				return
				let that = this

				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 相册和相机都可以
					success: function(res) {
						that.content = {
							errMsg: true,
							path: res.tempFilePaths[0]
						}
					},
					fail(err) {
						that.content = {
							errMsg: false,
						}
					},
					complete(res) {
						that.$public.showLoading(true,'上传中')

					}
				});


			},


			/**
			 * 上传头像
			 */
			async setHeadUpload(url) {
				let params = {
					headUrl: url
				}
				const res = await postHeadUpload(params)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '上传头像失败')
				}

				this.setUserInfo({
					avatarUrl: res.data,
				})
				this.$public.showLoading(false)

				this.$public.showText('上传头像成功')
			},


			/**
			 * 上传图片获取地址
			 */
			uploadFilePromise(url) {
				let that = this

				uni.uploadFile({
					url: this.$baseURL + 'api' + '/user/head/upload', // 上传接口
					filePath: url,
					name: 'file',
					header: {
						'Authorization': `Bearer ${this.userInfo.loginToken}`
					},
					formData: {},
					success: (res) => {},
					fail(err) {},
					complete(res) {
						let data = JSON.parse(res.data)

						if (data.code !== 200) {
							that.$public.showText(data.msg || '上传失败')
							return
						}
						
						that.setUserInfo({
							avatarUrl: data.data,
						})
						
						
						that.$public.showLoading(false)

						that.$public.showText('上传头像成功')

					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.upData {
		.image {
			#box(140rpx, 140rpx, 24rpx, linear-gradient(180deg, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.6) 100%));
			border: 4rpx solid #84CF61;
		}
	}
</style>